<template>
    <div style="height: 100vh;">
        <div style="position: absolute;left: 2%;">
            <label @click="btnIndex">
                < 返回 </label>
        </div>
        <div class="outDiv">
            <div class="top">
                <span :class="{ 'all': all }" @click="btnAll()">全部</span>
                <span :class="{ 'all': ing }" @click="btnIng()">审核中</span>
                <span :class="{ 'all': pass }" @click="btnPass()">审核通过</span>
                <span :class="{ 'all': reject }" @click="btnReject()">审核拒绝</span>
            </div>
            <div class="content">
                <div v-for="item in arr" :key="item.id"
                    style="width: 100%;height: 120px;display: flex;margin-bottom: 2%;">
                    <div class="cLeft">
                        <span>{{ item.statue }}</span>
                    </div>
                    <div class="cRight">
                        <span>运动会志愿者招募</span>
                        <span style="font-size: 12px;">2022-12-20 08:00 至 2022-12-22 04:30</span>
                        <span class="cite">{{ item.place }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
// == 引入相关依赖-开始 ==
import { ref, onMounted, computed } from 'vue'
import { url } from './router'
import { useRouter } from 'vue-router'
// == 引入相关依赖-结束 ==
/**
 * 样式之间的自由切换
 * 定义初始状态变量
 * 通过点击事件改变状态变量的值
 */
// == 实例-开始 ==
let reject = ref(false)
let items = ref([])
let arr = computed(() => {
    return items.value
})
let router = useRouter()
// == 实例-结束 ==
// == 动作函数-开始 ==
onMounted(() => {
    fetch(`${url}/volunteers`).then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(data => {
        data.forEach(item => {
            if (item.statue === 2) {
                item.statue = '审核中'
            } else if (item.statue === 1) {
                item.statue = '审核通过'
            } else if (item.statue === 0) {
                item.statue = '审核拒绝'
            }
        })
        items.value = data
    })
})
// 全部
function btnAll() {
    all.value = true
    ing.value = false
    pass.value = false
    reject.value = false
    arr = items.value
}
// 审核中
let ing = ref(false)
function btnIng() {
    all.value = false
    ing.value = true
    pass.value = false
    reject.value = false
    arr = items.value.filter(item => item.statue === '审核中')


}
// 审核通过
let pass = ref(false)
function btnPass() {
    all.value = false
    ing.value = false
    pass.value = true
    reject.value = false
    arr = items.value.filter(item => item.statue === '审核通过')

}
// 审核拒绝
let all = ref(true)
function btnReject() {
    all.value = false
    ing.value = false
    pass.value = false
    reject.value = true
    arr = items.value.filter(item => item.statue === '审核拒绝')

}
// 回到首页
function btnIndex() {
    router.push('/activity')
}
// == 动作函数-结束 ==

</script>
<style scoped>
.cite {
    display: flex;
    justify-content: center;
    background-color: #d1e5e5;
    width: 40%;
    align-items: center;
    height: 20%;
    font-size: 12px;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 10px;
}

label {
    width: 100%;
    font-size: 16px;
    color: #1b96f0;
}

.cRight {
    font-family: cursive;
    justify-content: space-evenly;
    flex-direction: column;
    display: flex;
    width: 60%;
    height: 100%;
}

.cLeft {
    height: 100%;
    width: 40%;
    align-items: flex-end;
    display: flex;
    background-image: url(/src/components/imgs/volunteer.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.cLeft span {
    min-width: 40%;
    background-color: #b9575780;
    color: #fff;
    text-align: center;
}

.cRight input {
    width: 110px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    text-align: center;
    outline: none;
    background-color: color(display-p3 0.5 0.5 0.5 / 0.47);

}

img {
    width: 100%;
    height: 100%;
}

.content {
    width: 100%;
    margin-top: 3%;
    height: 70%;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    overflow: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.all {
    color: darkgray;
    border-bottom: 2px solid darkgray;
}

.outDiv {
    width: 100%;
    margin-top: 2%;
    height: 100%;
    background-color: color(display-p3 0.5 0.5 0.5 / 0.47);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top {
    font-family: cursive;
    align-items: center;
    justify-content: space-around;
    display: flex;
    width: 100%;
    height: 8%;
    background-color: #fff;
}
</style>